<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <!-- 父组件传参 -->
    <my-search :parent-value.sync="money"></my-search>
</div>

<script src="./vue.js"></script>
<script>
    let myApp = new Vue({
        el: '#app',
        components: {
            // 注册组件
            // 注意点1：组件名称注册时用驼峰注册，使用组件时用-连接
            // 注意点2：如果存在多个html标签平级，需要一个根标签,最顶级的节点，只有一个
            // 注意点3：组件中如果需要声明变量，那么data必须是函数，return出变量对象
            // 注意点3-解析，变量污染
            // 注意点4：组件中声明方法，不要使用箭头函数，它不会指向全局的作用域，它会指向window

            // 子组件获取父组件的参数this.$parent.attr

            // 双向绑定 ---- 单向数据流

            // 父组件向子组件传参-双向绑定

            // 第一步，父组件参数的时候加上.sync修饰符
            // 第二部，使用this.$emit('update:attr')

            // 封装性
            // 独立性
            // 父子组件---数据交互
            mySearch: {
                // 子组件接收
                props: {
                    parentValue: {
                        // 接收参数的类型
                        type: String,
                        // props传参的默认值
                        default: '300'
                    }
                },

                // 在子组件中，我想使用父组件的数据

                // 接收父组件传过来的数据

                template: `
                    <div class="box">
                        <div>
                            <input v-model="userName" type="text">
                            {{userName}}
                            <button @click="search">搜索</button>
                        </div>
                        <div>{{childMsg}}</div>
                        <h1>继承遗产{{parentValue}}</h1>
                    </div>
                `,
                data: function () {
                    return {
                        userName: '',
                        childMsg: '这是组件中的变量'
                    }
                },
                methods: {
                    search () {
                        // console.log(this)
                        // console.log(this.userName)

                        // 代码可读性变差
                        // 不推荐
                        // console.log(this.$parent.money)

                        // this.parentValue = '100'

                        // 强烈不建议使用
                        this.$emit('update:parentValue', '100')
                    },
                    // search: () => {
                    // }
                }
            }
        },
        data: {
            money: '100000000000'
        },
        methods: {
        }
    })
</script>
</body>
</html>